<template>
  <view>
    <view>
      <template v-for="(item, index) in curOrderItemsDetailData">
        <view
          v-if="viewAllGoodsVisible ? index<1 : true"
          :key="index"
          @click="linkProductDetails(item)"
        >
          <view
            class="suk-con"
          >
            <view class="sku-pic">
              <image v-if="!(item.productPic||item.product_pic)" src="@/static/image/dis_img.png" />
              <image v-else :src="setImgSizeFn(item.productPic||item.product_pic,150)" />
              <!-- 是否限制类型(1危化品，2管制刀具，3非限制类) -->
              <text v-if="(item.dangerous==1||item.dangerous ==2)" class="icon iconfont">&#xe672;</text>
            </view>
            <view class="sku-name">
              {{ item.skuName || item.product_name }}
            </view>
            <view class="sku-code">编码：<text>{{ item.skuCode || item.product_code }}</text></view>
            <view v-if="item.endPrice&&item.unit_name" class="sku-price">
              ￥<text>{{ Number(item.endPrice).toFixed(2) }}</text>/{{ item.unit_name }}
            </view>
            <view v-else class="sku-price">
              ¥<text>{{ (Number(item.salePrice) - Number(item.promotionPrice) + Number(item.freightAllocationVal || 0)/(item.buyyerCount|| item.buyyer_count)).toFixed(2) }}</text>/{{ item.unitName }}</view>
            <view class="sku-num">x<text>{{ item.buyyerCount|| item.buyyer_count }}</text></view>

          </view>
        </view>
      </template>
    </view>
    <view
      v-if="viewAllGoodsVisible && curOrderItemsDetailData.length > 1"
      class="all-goods"
      @click.stop="viewAllGoodsFn(curOrderItemsDetailData)"
    >
      查看全部商品
      <image class="more" src="/static/orderIcon/down32.png" />
    </view>
  </view>
</template>

<script>
import { setImgSizeFn } from '@/common/common';
export default {
  name: 'OrderProductItem',
  components: {
  },
  props: {
    allGoodsPagePath: {
      type: String,
      default: ''
    },
    orderItemsDetailData: {
      type: Array,
      default: null
    },
    /*查看全部商品展示隐藏*/
    viewAllGoodsVisible: {
      type: Boolean,
      default: true
    },

    totalRecord: {
      type: Number,
      default: 0
    },
    islinkProductDetails: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  computed: {
    curOrderItemsDetailData() {
      return this.orderItemsDetailData
    }
  },
  mounted() {
    console.log(this.curOrderItemsDetailData)
  },
  methods: {
    setImgSizeFn,
    linkProductDetails(result) {
      if (!result.spu_id) { return }
      uni.navigateTo({
        url: '/subPages/productDetails/index?spuCode=' + (result.spuCode || result.spu_code) + '&skuCode=' + (result.skuCode || result.product_code)
      })
    },
    setAllGoodsFn(curOrderItemsDetailData) {
      return new Promise(resolve => {
        this.$u.vuex('vuex_allGoodsList', curOrderItemsDetailData)
        resolve()
      })
    },
    /*查看全部商品*/
    viewAllGoodsFn(curOrderItemsDetailData) {
      this.setAllGoodsFn(curOrderItemsDetailData).then(() => {
        uni.navigateTo({
          url: this.allGoodsPagePath
        });
      })
    }
  }
}
</script>
<style scoped lang="scss">
.all-goods {
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  color: #aaa;
  .more{
    width: 32rpx;
    height: 32rpx;
    margin-bottom: -6rpx;
  }
}
.suk-con {
  position: relative;
  padding: 0 20rpx 15rpx 180rpx;
  line-height: 34rpx;
  /*#ifdef MP-ALIPAY*/
  // width: 550rpx;
  /*#endif*/
  margin-bottom: 20rpx;
  .sku-name {
    line-height: 36rpx;
    font-weight: 600;
    .default-icon{
      width: 64rpx;
      height: 32rpx;
      display: inline-block;
      float: left;
      margin-right: 8rpx;
    }
    .dangerous-icon{
      width: 88rpx;
    }

  }
  .sku-pic {
    position: absolute;
    width: 140rpx;
    height: 140rpx;
    left: 20rpx;
    top: 0;
    image {
      width: 140rpx;
      height: 140rpx;
    }
    .iconfont{
      position: absolute;
      right: 0;
      bottom: 0;
      color:$uni-text-color-red;
      font-size: 32rpx;
    }
  }
  .sku-code {
    font-size:$uni-font-size-sm;
    color: $uni-grey-aaa;
    padding:6rpx 0 0;
    clear: both;
  }
  .sku-spec {
    display: inline-block;
    font-size:$uni-font-size-sm;
    color: $uni-grey-aaa;
    height: 30rpx;
    line-height: 30rpx;
    max-width: 310rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sku-price {
    font-size:$uni-font-size-base;
    color: $uni-orange;
    font-weight: bold;
    padding-top:8rpx;
    text{
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  .sku-num {
    font-size:$uni-font-size-sm;
    text-align: right;
    position: absolute;
    right: 30rpx;
    bottom:15rpx;
    color: $uni-grey-999;
  }
  .sku-stock {
    color: $uni-orange;
    height: 28rpx;
    line-height: 28rpx;
    background: $uni-bg-color;
    border: 1px solid $uni-orange;
    border-radius: 4rpx;
    padding: 0 4rpx;
    position: absolute;
    bottom: 63rpx;
    right: 18rpx;
  }
  .sku-num-change {
    position: absolute;
    bottom:15rpx;
    right: 10rpx;
    ::v-deep input {
      height: 32rpx;
      font-size: 24rpx;
    }
    ::v-deep view {
      padding: 0 8rpx;
    }
  }
}
</style>
